<template>
  <view
    class="describeCard"
    v-for="(itme, index) in loopShop"
    @click="toDetail(itme.shop_id)"
  >
    <view class="imgBox">
      <image :src="imageUrl + itme.cover_image" mode="aspectFill"></image>
      <view class="labelFlex">
        <view class="label">
          <image
            src="@/static/home/icon_design-tool_drafting-compass.png"
            mode=""
          ></image>
          <text>{{ itme.trip_day }}天{{ itme.trip_night}}晚</text>
        </view>
        <text class="Selection">西望甄选</text>
      </view>
    </view>
    <view class="textBox">
      <text class="title">{{ loopShopData[0].loop_name }}|{{ itme.title }}</text>
      <text class="deputyTitle">{{ itme.subtitle }}</text>
      <text class="content">{{ itme.description }}</text>
      <view class="tags">
        <view
          class="tags-card"
          v-for="(item_a, index_a) in itme.label_list"
          :key="index_a"
        >
          <text>{{ item_a }}</text>
        </view>
      </view>
      <view class="price">
        <text>￥</text>
        <text>{{ itme.display_price }}</text>
        <text class="NumberPeople">/人起</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, defineProps, watchEffect } from "vue";
import { imageUrl } from "@/config/request/request.js";
import { routerGuard } from "@/config/RouteGuard.js";
const loopShop = ref([]);
const props = defineProps({
  loopShopData: {
    type: Object,
    default: () => {},
  },
});
// 监听 products 的变化
watchEffect(() => {
  loopShop.value = props.loopShopData[0].loop_shop;
  console.log("父组件传递的商品数据loopShopData:", loopShop.value);
});
const toDetail = (id) => {
  const url = `/homeSubpages/ProductDetails/index?ShopId=${id}`;
  routerGuard(url);
};
</script>

<style lang="scss" scoped>
.describeCard {
  width: 100%;
  min-height: 450rpx;
  background-color: #fff;
  border-radius: 20rpx 20rpx 45rpx 45rpx;
  overflow: hidden;
  margin-bottom: 36rpx;
  .imgBox {
    width: 100%;
    height: 370rpx;
    position: relative;
    image {
      width: 100%;
      height: 100%;
    }
    .labelFlex {
      display: flex;
      align-items: center;
      gap: 15rpx;
      position: absolute;
      top: 25rpx;
      left: 20rpx;
      height: 30rpx;
      .label {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 10rpx;
        gap: 4rpx;
        height: 100%;
        border-radius: 6rpx;
        background: rgba(54, 48, 48, 1);
        font-size: 16rpx;
        font-weight: 400;
        color: rgba(232, 208, 149, 1);
        image {
          width: 20rpx;
          height: 20rpx;
        }
      }
      .Selection {
        font-size: 16rpx;
        font-weight: 400;
        line-height: 30rpx;
        color: #fff;
        background-color: rgba(4, 75, 173, 1);
        padding: 0 10rpx;
        border-radius: 6rpx;
      }
    }
  }
  .textBox {
    width: 100%;
    padding: 12rpx;
    padding-bottom: 20rpx;
    box-sizing: border-box;
    text {
      display: block;
    }
    .title {
      font-size: 24rpx;
      font-weight: 700;
    }
    .deputyTitle {
      font-size: 20rpx;
      font-weight: 700;
    }
    .content {
      margin-top: 18rpx;
      font-size: 22rpx;
      color: rgba(125, 125, 125, 1);
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 7;
      overflow: hidden;
      text-overflow: ellipsis;
      // text-indent: 2em;
    }

    .tags {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      gap: 10rpx;
      margin-top: 18rpx;

      .tags-card {
        padding: 10rpx 12rpx;
        border-radius: 12rpx;
        background-color: #f5f6f7;
        box-sizing: border-box;

        text {
          color: #888888;
          font-size: 24rpx;
        }
      }
    }
    .price {
      display: flex;
      margin-top: 10rpx;
      text {
        font-weight: 600;
      }
      .NumberPeople {
        margin-left: 10rpx;
        color: rgba(125, 125, 125, 1);
        font-weight: 500;
      }
    }
  }
}
</style>
